import React, { Component } from 'react';
import { Form, Select, Button, Input, Checkbox, DatePicker } from 'antd';

const { Item } = Form;
const { Option } = Select;

const getOptionList = data => {
  if (!data) {
    return [];
  }
  const option = [] //[<Option value="0" key="all_key">全部</Option>];
  data.forEach(item => {
    option.push(<Option value={item.id} key={item.id}>{item.name}</Option>)
  });
  return option;
};

class BaseForm extends Component {
  render() {
    return (
      <Form layout="inline">
        {
          this.initFormList()
        }
        <Item>
          <Button type="primary" style={{ margin: '0 20px' }} onClick={this.handleFilterSubmit}>查询</Button>
          <Button onClick={this.handleReset}>重置</Button>
        </Item>
      </Form>
    )
  }

  initFormList = () => {
    const { getFieldDecorator } = this.props.form;
    const formList = this.props.formList;
    const formItemList = [];
    if (formList && formList.length > 0) {
      formList.forEach(item => {
        let { label, field, initialValue, placeholder, width } = item;
        initialValue = initialValue || '';
        if (item.type === '时间查询') {
          const begin_time = (
            <Item label="订单时间" key='begin_time'>
              {
                getFieldDecorator('begin_time')(
                  <DatePicker
                    showTime={true}
                    placeholder={placeholder}
                    style={{width: 180}}
                    format="YYYY-MM-DD HH:mm:ss"/>
                )
              }
            </Item>
          );
          formItemList.push(begin_time);

          const end_time = (
            <Item label="~" colon={false} key='end_time'>
              {
                getFieldDecorator('end_time')(
                  <DatePicker
                    showTime={true}
                    placeholder={placeholder}
                    style={{width: 180}}
                    format="YYYY-MM-DD HH:mm:ss"/>
                )
              }
            </Item>
          )
          formItemList.push(end_time);
        } else if (item.type === 'SELECT') {
          const SELECT = (
            <Item label={label} key={label}>
              {
                getFieldDecorator(field, {
                  initialValue
                })(
                  <Select
                    style={{ width }}
                    placehodler={{ placeholder }}>
                    {getOptionList(item.list)}
                  </Select>
                )
              }
            </Item>
          );
          formItemList.push(SELECT);
        } else if (item.type === 'INPUT') {
          const INPUT = (
            <Item label={label} key={label}>
              {
                getFieldDecorator(field, {
                  initialValue
                })(
                  <Input type="text" placeholder={placeholder} />
                )
              }
            </Item>
          );
          formItemList.push(INPUT);
        } else if (item.type === 'CHECKBOX') {
          const CHECKBOX = (
            <Item label={label} key={label}>
              {
                getFieldDecorator(field, {
                  valuePropName: 'checked',
                  initialValue  // true | false
                })(
                  <Checkbox>{label}</Checkbox>
                )
              }
            </Item>
          );
          formItemList.push(CHECKBOX);
        }
      })
    }
    return formItemList;
  };

  handleFilterSubmit = () => {
    const fieldValue = this.props.form.getFieldsValue();
    this.props.filterSubmit(fieldValue)
  }

  handleReset = ()=>{
    this.props.form.resetFields();
  }
}

export default Form.create()(BaseForm)
